@extends('layouts.default')
@section('css')
<style>
.test{

}
</style>


<link rel="stylesheet" type="text/css" href="{{asset('css/eleui-theme-chalk.css')}}">
<!-- 引入样式 -->
<link rel="stylesheet" href="{{asset('css/iview.css')}}">
<!-- 引入组件库 -->

<link rel="stylesheet" href="{{asset('css/finance/index.css')}}">
{{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
@stop
@section('content')
<div class="row">
    <div class="col-12">

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">财务管理/ <a class="text-primary" href="{{url('admin/finance/index')}}">财务列表</a></h3>
            </div>
            <div class="row">
            </div>
            @include('layouts.message')
            <!-- /.card-header -->
            <div class="card-body">
                @verbatim
                <div class="ivu-card ivu-card-bordered " id="finance">
                    <!-- 状态筛选列 -->
                    <div class="one">
                        <div class="select-order-type">
                            <!-- <ul>
                            <li @click="switch_status(index)" v-for="(item,index) in orderStateTxt " :key="index" :class="{active:selectOrderTypeState==index}" v-html="item"></li>
                        </ul> -->
                    </div>
                    <div class="search">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item style="margin-right:0;width:130px;">
                                <el-select v-model="search.OptionVal" placeholder="请选择" >
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="margin-right:0;">
                                <el-input v-model="search.OptionInput" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <el-form-item @click.native="searchClick">
                                <el-button  type="primary">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div><!-- 状态筛选列-结束 -->


                <el-table :data="tableData5" style="width: 100%" @expand-change="expand" :row-key="getRowKeys" :expand-row-keys="expands_row_keys">
                    <el-table-column type="expand" label="操作">
                        <template slot-scope="userInfo">
                            <el-tabs v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane label="基本信息" name="first">
                                    <el-row>
                                        <el-form class="demo-form-inline" :label-position="'left'" :size="'mini'" label-width="5em">
                                            <el-col :span="24">
                                                <el-col :span="12">
                                                    <el-form-item label="用户昵称">
                                                        <span>{{userInfo.row.user_nickname}}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="手机">
                                                        <span>{{userInfo.row.user_name}}</span>
                                                    </el-form-item>
                                                </el-col>

                                            </el-col>
                                            <el-col :span="24">
                                                <el-col :span="12">
                                                    <el-form-item label="性别">
                                                        <span>{{userInfo.row.user_nickname}}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="注册日期">
                                                        <span>{{userInfo.row.user_reg_time}}</span>
                                                    </el-form-item>
                                                </el-col>
                                            </el-col>

                                        </el-form>
                                    </el-row>



                                </el-tab-pane>
                                <el-tab-pane label="收货地址" name="second" >
                                    <el-card class="box-card" shadow="hover" >
                                        <div slot="header" class="clearfix"><!-- 收货地址信息开始-->
                                            <span>收货地址列表</span>
                                        </div>
                                        <el-table  border :data="addressList" style="width: 100%">
                                          <el-table-column label="收货人" width="180" prop="name">
                                          </el-table-column>
                                          <el-table-column label="联系电话" width="180" prop="phone">

                                          </el-table-column>
                                           <el-table-column label="收货地址">
                                               <template slot-scope="address">
                                                   <span>
                                                        {{address.row.province[0]}}{{address.row.city[0]}}{{address.row.dist[0]}}{{address.row.content}}
                                                   </span>
                                               </template>
                                           </el-table-column>
                                        </el-table>
                                    </el-card><!-- 收货地址信息结束 -->
                                </el-tab-pane>
                                <el-tab-pane label="订单" name="third">
                                    <el-card class="box-card" shadow="hover" >
                                        <div slot="header" class="clearfix"><!-- 收货地址信息开始-->
                                            <span>订单列表</span>
                                        </div>
                                        <el-table  border :data="orderList"  style="width: 100%">
                                          <el-table-column prop="order_sn" label="订单号" width="180">
                                          </el-table-column>
                                          <el-table-column label="收货人" width="180" prop="consignee">
                                          </el-table-column>
                                          <el-table-column label="收货手机" width="180" prop="mobile">
                                          </el-table-column>
                                           <el-table-column label="收货地址" prop="address">
                                               <template slot-scope="orderRow">
                                                   {{orderRow.row.province}}{{orderRow.row.city}}{{orderRow.row.district}}{{orderRow.row.address}}
                                               </template>
                                           </el-table-column>
                                            <el-table-column  label="订单总金额" prop="money_paid" > </el-table-column>
                                            <el-table-column  label="付款状态"   prop="pay_status" ></el-table-column>
                                            <el-table-column  label="发货状态"   prop="ship_way">
                                            </el-table-column>
                                            <el-table-column  label="支付方式"   prop="pay_way">
                                            </el-table-column>
                                            <el-table-column  label="发货方式"   prop="ship_way">
                                            </el-table-column>
                                            <el-table-column  label="下单时间"   prop="order_time">
                                            </el-table-column>
                                        </el-table>
                                        <!-- 分页存放处 -->
                                        <el-pagination
                                                background
                                                layout="total, prev, pager, next"
                                                :total="orderPagination.total"
                                                :page-size="orderPagination.page_sizes"
                                        @current-change="orderPage"
                                        >
                                        </el-pagination><!-- 分页存放处结束 -->
                                    </el-card><!-- 收货地址信息结束 -->
                                </el-tab-pane>
                                <el-tab-pane label="一级上线" name="fourth">
                                    <el-card class="box-card" shadow="hover" >
                                        <div slot="header" class="clearfix"><!-- 收货地址信息开始-->
                                            <span>一级上线</span>
                                        </div>
                                        <el-table  border :data="[userInfo.row.High_BNF.BNF_Lv1]"  style="width: 100%">
                                            <el-table-column prop="user_nickname" label="用户昵称" width="180">
                                            </el-table-column>
                                            <el-table-column prop="user_name" label="手机" width="180">
                                            </el-table-column>
                                            <el-table-column prop="withdraw" label="可提现余额">
                                            </el-table-column>
                                            <el-table-column  prop="user_sex" label="性别"> </el-table-column>
                                            <el-table-column  prop="user_reg_time" label="注册时间"></el-table-column>
                                        </el-table>
                                    </el-card>
                                </el-tab-pane>
                                <el-tab-pane label="二级上线" name="fifth">
                                    <el-card class="box-card" shadow="hover" >
                                        <div slot="header" class="clearfix"><!-- 收货地址信息开始-->
                                            <span>二级上线</span>
                                        </div>
                                        <el-table  border :data="[userInfo.row.High_BNF.BNF_Lv2]"  style="width: 100%">
                                            <el-table-column prop="user_nickname" label="用户昵称" width="180">
                                            </el-table-column>
                                            <el-table-column prop="user_name" label="手机" width="180">
                                            </el-table-column>
                                            <el-table-column prop="withdraw" label="可提现余额">
                                            </el-table-column>
                                            <el-table-column  prop="user_sex" label="性别"> </el-table-column>
                                            <el-table-column  prop="user_reg_time" label="注册时间"></el-table-column>
                                        </el-table>
                                    </el-card>
                                </el-tab-pane>
                                <el-tab-pane label="三级上线" name="sixth">
                                    <el-card class="box-card" shadow="hover" >
                                        <div slot="header" class="clearfix"><!-- 收货地址信息开始-->
                                            <span>三级上线</span>
                                        </div>
                                        <el-table  border :data="[userInfo.row.High_BNF.BNF_Lv3]"  style="width: 100%">
                                            <el-table-column prop="user_nickname" label="用户昵称" width="180">
                                            </el-table-column>
                                            <el-table-column prop="user_name" label="手机" width="180">
                                            </el-table-column>
                                            <el-table-column prop="withdraw" label="可提现余额">
                                            </el-table-column>
                                            <el-table-column  prop="user_sex" label="性别"> </el-table-column>
                                            <el-table-column  prop="user_reg_time" label="注册时间"></el-table-column>
                                        </el-table>
                                    </el-card>
                                </el-tab-pane>
                                <el-tab-pane label="一级下线" name="seventh">
                                    <el-card class="box-card" shadow="hover" >
                                        <div slot="header" class="clearfix"><!-- 收货地址信息开始-->
                                            <span>一级下线</span>
                                        </div>
                                        <el-table  border :data="lowerUserList.Lower_BNF_Lv1.list"  style="width: 100%">
                                            <el-table-column prop="user_nickname" label="用户昵称" width="180">
                                            </el-table-column>
                                            <el-table-column prop="user_name" label="手机" width="180">
                                            </el-table-column>
                                            <el-table-column prop="withdraw" label="可提现余额">
                                            </el-table-column>
                                            <el-table-column  prop="user_sex" label="性别"> </el-table-column>
                                            <el-table-column  prop="user_reg_time" label="注册时间"></el-table-column>
                                        </el-table>
                                    </el-card>
                                </el-tab-pane>
                                <el-tab-pane label="二级下线" name="eigth">
                                    <el-card class="box-card" shadow="hover" >
                                        <div slot="header" class="clearfix"><!-- 收货地址信息开始-->
                                            <span>二级下线</span>
                                        </div>
                                        <el-table  border :data="lowerUserList.Lower_BNF_Lv2.list"  style="width: 100%">
                                            <el-table-column prop="user_nickname" label="用户昵称" width="180">
                                            </el-table-column>
                                            <el-table-column prop="user_name" label="手机" width="180">
                                            </el-table-column>
                                            <el-table-column prop="withdraw" label="可提现余额">
                                            </el-table-column>
                                            <el-table-column  prop="user_sex" label="性别"> </el-table-column>
                                            <el-table-column  prop="user_reg_time" label="注册时间"></el-table-column>
                                        </el-table>
                                    </el-card>
                                </el-tab-pane>
                                <el-tab-pane label="三级下线" name="ninth">
                                    <el-card class="box-card" shadow="hover" >
                                        <div slot="header" class="clearfix"><!-- 收货地址信息开始-->
                                            <span>三级下线</span>
                                        </div>
                                        <el-table  border :data="lowerUserList.Lower_BNF_Lv3.list"  style="width: 100%">
                                            <el-table-column prop="user_nickname" label="用户昵称" width="180">
                                            </el-table-column>
                                            <el-table-column prop="user_name" label="手机" width="180">
                                            </el-table-column>
                                            <el-table-column prop="withdraw" label="可提现余额">
                                            </el-table-column>
                                            <el-table-column  prop="user_sex" label="性别"> </el-table-column>
                                            <el-table-column  prop="user_reg_time" label="注册时间"></el-table-column>
                                        </el-table>
                                    </el-card>
                                </el-tab-pane>
                            </el-tabs>

                        </template>
                    </el-table-column>
                    <el-table-column label="用户名" prop="user_name">
                    </el-table-column>
                    <el-table-column label="用户昵称" prop="user_nickname">
                    </el-table-column>
                    <el-table-column label="手机" prop="user_name">
                    </el-table-column>
                    <el-table-column label="性别" prop="user_sex">
                    </el-table-column>
                    <el-table-column label="注册时间" prop="user_reg_time">
                    </el-table-column>
                </el-table>

                    <!-- 分页存放处 -->
                    <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :total="pagination.total"
                            :page-size="pagination.page_sizes"
                    @current-change="page"
                    >
                    </el-pagination><!-- 分页存放处结束 -->
                @endverbatim
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
</div>
<!-- /.col -->
</div>
@stop


@section('script')
<script type="text/javascript" src="{{asset('js/vue.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/view.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/element-ui.js')}}"></script>
<script src="{{asset('js/axios.js')}}"></script>

<script type="text/javascript">
Vue.config.devtools = true;
var service = axios.create({
    timeout:5000,
    headers:{
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
});
var userHref        = "{{url('admin/finance/UserListWithPage')}}", //用户列表
    user_order      = "{{url('admin/finance/user_order')}}",       //用户订单列表接口
    addresslistUrl     = "{{url('admin/finance/addresslist')}}",     //用户地址列表接口
    getLowerBNFUrl     = "{{url('admin/finance/getLowerBNF')}}";//下三级用户

new Vue({
    el: '#finance',
    data:{
        activeName:'first',
        options: [{
            value: 0,
            label: '用户昵称'
        }, {
            value: 1,
            label: '用户手机号',
        }],
        search:{
            page  : 1,
            OptionVal   : '', //下拉框类型
            OptionInput : '', //输入搜索框的值
            key : '',
            val : '',
        },
        //最外层分页对象
        pagination:{
            page_sizes:15,
            total:0,
        },
        //订单分页对象
        orderPagination:{
            page_sizes:15,
            total:0,
        },
        //一级下线
        Lower_BNF_Lv1Pagination:{
            page_sizes:15,
            total:0,
        },
        //二级下线
        Lower_BNF_Lv2Pagination:{
            page_sizes:15,
            total:0,
        },
        //三级下线
        Lower_BNF_Lv3Pagination:{
            page_sizes:15,
            total:0,
        },
        click_user_id:'',
        orderExpand:{},
        expands_row_keys:[], //打开的列表记录
        OptionLabelMaps:['user_nickname','user_name'],
        tableData5: [],//用户列表数据
        addressList:[],//收货地址列表数据
        orderList:[],//订单列表数据
        lowerUserList:{
            Lower_BNF_Lv1:[],
            Lower_BNF_Lv2:[],
            Lower_BNF_Lv3:[],
            }, //下三级用户列表
    },
    created:function(){
        this.getUserList(userHref,{page:1});
//        this.getLowerBNF(getLowerBNFUrl);
    },
    methods:{
        searchOrder(){
            console.log('search')
        },
        handleClick(tab,event){
            console.log(tab,event)
        },
        //获取用户列表
        getUserList(href,params){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var that = this;
            for(var key in params){
                if(href.indexOf('?')<0){
                    href+='?'+key+'='+params[key];
                }else{
                    href+='&'+key+'='+params[key];
                }
            }
            service.get(href)
                .then((res) =>{
                    loading.close();
                    if(res.data.ret == 200){

                        that.tableData5 = res.data.data.list;
                        console.log(this.tableData5)
                        that.pagination.page_sizes = parseInt(res.data.data.per_page);
                        that.pagination.total     = parseInt(res.data.data.total);
                    }
                })
        },
        //获取收货地址列表
        getAddressList(href,params){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var that = this;
            for(var key in params){
                if(href.indexOf('?')<0){
                    href+='?'+key+'='+params[key];
                }else{
                    href+='&'+key+'='+params[key];
                }
            }
            service.get(href)
                .then((res) =>{
                    loading.close();
                    if(res.data.ret == 200){
                        that.addressList =  res.data.data;
                    }
                })
        },
        //获取下三级用户
        getLowerBNF(href,params){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var that = this;
            for(var key in params){
                if(href.indexOf('?')<0){
                    href+='?'+key+'='+params[key];
                }else{
                    href+='&'+key+'='+params[key];
                }
            }
            service.get(href)
                .then((res) =>{
                    loading.close();
                    if(res.data.ret == 200){
                        that.lowerUserList =  res.data.data;
                    }
                })
        },
        //获取用户的订单列表
        getOrderList(href,params){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var that = this;
            for(var key in params){
                if(href.indexOf('?')<0){
                    href+='?'+key+'='+params[key];
                }else{
                    href+='&'+key+'='+params[key];
                }
            }
            service.get(href)
                .then((res) =>{
                    loading.close();
                    if(res.data.ret == 200){
                        that.orderList =  res.data.data.list;
                        that.orderPagination.total =  parseInt(res.data.data.total);
                        that.orderPagination.page_sizes =  parseInt(res.data.data.page_size);
                    }
                })
        },
        page:function(current_page){
            this.search.page = current_page;
            this.getUserList(userHref,this.search);
        },
        //订单分页
        orderPage:function(current_page){
            this.getOrderList(user_order,{user_id:this.click_user_id,page:current_page});
        },

        //格式化搜索选项，下拉框
        parseSearch:function(){
            var that = this;
//            console.log(this.search.OptionVal);
            if(this.search.OptionVal===''){
                this.$message({
                    message: '请选择搜索类型!',
                    type: 'warning'
                });
                return false;
            }
            this.search.key = this.OptionLabelMaps[parseInt(this.search.OptionVal)];
            this.search.val = this.search.OptionInput;
            return true;
        },
        //点击搜索的事件
        searchClick:function(){
            this.search.page = 1;
            if(!this.parseSearch()){
                return false;
            }
            this.getUserList(userHref,this.search);
        },

        //展开事件
        expand:function(row, expandedRows){
            this.click_user_id = row.id;
            if(expandedRows.length>0){
                this.changeExpandStatus(expandedRows[0].id,false);
            }
            //是其他行关闭，让本行打开
            if(this.expands_row_keys.length>0 && this.expands_row_keys[0] == row.id){
                //本行关闭
                this.expands_row_keys = [];
            }else{
                this.expands_row_keys = [];
                this.expands_row_keys.push(row.id);
            }

            //展开到关闭 不用调用接口
            if(this.check_order_expand_status(row.id)){
                this.changeExpandStatus(row.id);
                return;
            }
            this.changeExpandStatus(row.id);
            this.getAddressList(addresslistUrl,{uid:row.id});
            this.getOrderList(user_order,{user_id:row.id});
            this.getLowerBNF(getLowerBNFUrl,{uid:row.id});
        },

        //测试该列是否展开
        check_order_expand_status:function(order_sn){
            if(order_sn in this.orderExpand){
                return !!this.orderExpand[order_sn];
            }else{
                return false;
            }
        },

        //更改展开的状态
        changeExpandStatus:function(order_sn,status){
            if(order_sn in this.orderExpand){
                this.orderExpand[order_sn] = status === undefined ? !this.orderExpand[order_sn] : status ;
            }else{
                this.orderExpand[order_sn] = status === undefined ? true : status;
            }
        },
        //清除展开的状态
        clearExpandStatus:function(order_sn){
            var that = this;
            for(var key in this.orderExpand){
                delete this.orderExpand[key];
            }
        },

        getRowKeys(row){
            //用户id
            return row.id;
        },

    }
})
</script>


@stop
